.markdown {
    @apply break-words;

    a {
        @apply text-blue-600 underline;

        &:hover {
            @apply text-blue-800;
        }
    }

    img {
        @apply inline;
    }

    p, blockquote, ul, ol, dl, table, pre {
        @apply my-4;
    }

    ul, ol {
        @apply pl-8;
    }

    ul {
        @apply list-disc;
    }

    ol {
        @apply list-decimal;
    }

    h1 {
        @apply border-b border-gray-400 text-4xl;
    }

    h2 {
        @apply border-b border-gray-400 text-3xl;
    }

    h3 {
        @apply text-2xl;
    }

    h4 {
        @apply text-xl;
    }

    h5 {
        @apply text-base;
    }

    h6 {
        @apply text-base text-gray-600;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-bold leading-relaxed mt-8 mb-4;
    }

    h1 + p, h2 + p, h3 + p {
        @apply mt-4;
    }

    code {
        @apply bg-gray-200 rounded-sm font-mono p-1 overflow-y-auto;
    }

    pre > code {
        @apply block p-4 text-sm whitespace-pre;
    }

    hr {
        @apply border-t-2 border-gray-400 my-4;
    }

    blockquote {
        @apply border-l-4 border-gray-400 pl-2 text-gray-600;
    }

    table {
        @apply table;

        th, td {
            @apply border border-gray-400 p-1;
        }

        th {
            @apply font-bold;
        }
    }

    dl {
        dt {
            @apply font-bold;
        }

        dd {
            @apply pl-4;
        }
    }

    & > :first-child {
        @apply mt-0;
    }

    & > :last-child {
        @apply mb-0;
    }
}

#app.dark .markdown {
    a {
        @apply text-purple-600;

        &:hover {
            @apply text-purple-800;
        }
    }

    h1, h2 {
        @apply border-gray-800;
    }

    code {
        @apply bg-gray-800;
    }

    hr {
        @apply border-gray-800;
    }

    .hljs, .hljs-keyword {
        @apply text-white;
    }
}
